<template>
    <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside :width="sideWidth +'px'" style="background-color: rgb(238, 241, 246); height: 100% ;box-shadow: 2px 0 6px rgb(0 21 36)" >
      <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x: hidden;" background-color="#695F69" text-color="#F5FFF7"
      :collapse-transition="false"
       :collapse="isCollapse"
       router
      >
        <div style="height: 60px;line-height: 60px;text-align: center">
          <img src= "@/assets/img/1.jpg" alt="不见了" style="width: 20px">
          <b style="color: #eeeeee" v-show="!isCollapse">奖学金申请</b>
        </div>
            <el-menu-item index="/student/info"><i class="el-icon-user-solid"></i>个人信息</el-menu-item>

            <el-menu-item index="/student/jiafen"><i class="el-icon-top"></i>加分申请</el-menu-item>
            <el-menu-item index="/student/shen"><i class="el-icon-top"></i>奖学金申请</el-menu-item>
            <el-menu-item index="/student/showj"><i class="el-icon-tickets"></i>奖学金公示</el-menu-item>
   

      </el-menu>
    </el-aside>
    
    <el-container>
    
      <el-header style="text-align: right; font-size: 12px;display: flex ">
        <div style="flex: 0 0 auto; font-size: 20px;"> <!-- flex: 0 0 auto; 确保这个元素不会伸缩 -->
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <!-- 剩余的元素 -->
        <el-dropdown style="margin-left: auto; width: 200px;" @command="handleCommand"> <!-- margin-left: auto; 将这个元素推到右边 -->
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="/slogin">退出</el-dropdown-item>
    
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    
      <el-main>
        <!-- 当前页面子路由 -->
        <router-view />
         
      </el-main>
     
      </el-container>
    </el-container>
    </template>
    
    
    <script>
 
    import { RouterView } from "vue-router";
    export default {
      
      data() {
       
        return {
          
          collapseBtnClass: 'el-icon-s-fold',   //样式设置
          isCollapse: false,   // 是否收缩
          sideWidth: 200 ,      //格式设置
          
        }
      },
      
      methods:{
        collapse(){
        this.isCollapse = !this.isCollapse
          if(this.isCollapse){
            this.sideWidth = 64
            this.collapseBtnClass='el-icon-s-unfold'
          }else{
            this.sideWidth=200
            this.collapseBtnClass='el-icon-s-fold'
          }
        },
        handleCommand(command){
          localStorage.removeItem("token")
          this.$router.push(command)
        }
      }
    };
    </script>
    <style>
    .el-header {
      background-color: #FCFCFC;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
    
    </style>